<template>
    <div class="repordef">
        <a-tabs @change="callback" default-active-key="1">
            <a-tab-pane key="1">
                <span slot="tab">{{i18n('attrSet','属性设置')}}</span>
                <a-form class="chart-tit" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                    <a-form-model-item :label="i18n('chartTitle','图表标题')">
                        <a-input class="formInput" v-model="config.name"></a-input>
                    </a-form-model-item>

                </a-form>
                <a-checkbox v-model="config.showName" style="margin-left: 10px">{{i18n('titleDisplay','标题展示')}}</a-checkbox>
                <a-checkbox class="formChenckbox" v-model="config.fullBtn">{{customViewI18n('fullBtn','全屏按钮')}}</a-checkbox>
                <a-collapse default-active-key="1" expand-icon-position="right" class="alist">
                    <a-collapse-panel key="1" :header="i18n('selChartType','选择图表类型')">
                        <ul class="chart-type">
                            <li v-for="obj in reportTypes" :key="obj.key" @click="setReportType(obj.key)">
                                <div :class="config.reportType ==obj.key?'select chart-middle-chart':'chart-middle-chart'">
                                    <div v-if="config.reportType ==obj.key" class="dragiconfont"><i
                                        class="iconfont iconright"></i></div>
                                    <img :src="obj.img"/>
                                    <span :title="obj.name" class="chart-span">{{ obj.name }}</span>
                                </div>
                            </li>
                        </ul>
                    </a-collapse-panel>
                </a-collapse>

                <!--图表颜色-->
                <div style="margin: 10px"
                     v-if="config.reportType!='map' &&  config.reportType!='customChart' &&  config.reportType!='numerical'">
                    <div>{{i18n('chartColor','图表颜色')}}</div>
                    <a-radio-group v-if="config.reportType!='gauge'" @change="onChange"
                                   v-model="config.colour.value">
                        <div class="colourback_obj">
                            <div>
                                <a-radio :value="1">
                                    <ul class="colourback">
                                        <li v-for="colourback in colour" :style="{background:colourback}"></li>
                                    </ul>
                                </a-radio>
                            </div>
                            <div>
                                <a-radio :value="2">
                                    <ul class="colourback">
                                        <li v-for="colourback in colour_obj" :style="{background:colourback}"></li>
                                    </ul>
                                </a-radio>
                            </div>
                        </div>
                        <div>
                            <a-radio :value="3">
                                {{i18n('customColor','自定义颜色')}}</br>
                                <div class="color-box">
                                    <div class="ainput">
                                        <span v-for="(obj,index) in definition" :key="index"
                                              @mouseenter="mouseenter(index)" @mouseleave="mouseleave('null')">
                                            <span @click="Remove(index)" v-if="display == index" class="delete">
                                                <my-icon type="iconVue3_delete-filled"></my-icon>
                                            </span>
                                            <a-input class="labeinput_list" v-decorator="[obj]"
                                                     v-model="definition[index]" type="color" :placeholder="i18n('labelColor','标签颜色')"/>
                                        </span>
                                    </div>
                                    <div class="colcjia" @click="addto"><i class="iconfont iconjia"></i></div>
                                </div>
                            </a-radio>
                        </div>
                    </a-radio-group>
                    <div v-else>
                        <a-button-group class="abuttonhert">
                            <a-button class="abutton" @click="addGaugeColour">
                                <i class="iconjia iconfont"></i>
                            </a-button>
                            <a-button class="abutton" @click="gaugeColourRemove()">
                                <i class="icontrash iconfont"></i>
                            </a-button>

                            <a-button class="abutton" @click="gaugeColourUp()">
                                <i class="iconshang iconfont"></i>
                            </a-button>

                            <a-button class="abutton" @click="gaugeColourDown()">
                                <i class="iconxia iconfont"></i>
                            </a-button>
                        </a-button-group>
                        <a-table
                            :dataSource="config.gaugeColours"
                            :pagination="false"
                            :rowSelection="gaugeRowSelection"
                            rowKey="idx_"
                            :bordered="true"
                        >
                            <a-table-column :title="i18n('percentage','百分比')" dataIndex="percent">
                                <template slot-scope="text, record">
                                    <a-input-number
                                        :min="0"
                                        :max="100"
                                        :formatter="value => `${value}%`"
                                        :parser="value => value.replace('%', '')"
                                        v-model="record.percent"
                                    />
                                </template>
                            </a-table-column>
                            <a-table-column :title="i18n('color','颜色')" dataIndex="colour">
                                <template slot-scope="text, record">
                                    <div class="ainput">
                                        <a-input class="labeinput_list" v-model="record.colour" type="color"
                                                 :placeholder="i18n('labelColor','标签颜色')"/>
                                    </div>
                                </template>
                            </a-table-column>
                        </a-table>
                    </div>
                </div>
                <div style="margin: 10px" v-if="config.reportType=='map'">
                    <div>{{i18n('mapConfig','地图配置')}}</div>
                    <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                        <a-form-model-item :label="i18n('mapType','地图类型')">
                            <a-select v-model="config.mapType" :options="mapTypes" :getPopupContainer="(p)=>p.parentNode"> </a-select>
                        </a-form-model-item>
                        <a-form-model-item :label="i18n('colorLegend','颜色图例')">
                            <a-switch size="small" v-model="config.isLegend" />
                        </a-form-model-item>
                        <a-form-model-item :label="i18n('visualMapComp','视觉映射组件')">
                            <a-switch size="small" v-model="config.visualMap" />
                        </a-form-model-item>
                    </a-form>
                </div>
                <!--自定义组件-->
                <div v-if="config.reportType=='customChart'">
                    <a-button style="margin-left: 10px;margin-right: 5px" @click="editCustomChart()">{{i18n('config','配置')}}</a-button>
                    <a-tag color="green" v-if="config.jsScript">{{i18n('configured','已配置')}}</a-tag>
                    <a-tag color="red" v-else>{{i18n('notConfig','未配置')}}</a-tag>
                </div>
                <!--指标卡-->
                <div v-if="config.reportType=='numerical'">
                    <div class="rx-cardConfig">{{i18n('cardConfig','卡片配置')}}</div>
                    <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                        <a-form-model-item :label="i18n('horizontalAlign','水平对齐方式')">
                            <a-radio-group v-model="config.align" size="small" >
                                <a-radio-button value="center">{{i18n('center','居中')}}</a-radio-button>
                                <a-radio-button value="left">{{i18n('left','居左')}}</a-radio-button>
                            </a-radio-group>
                        </a-form-model-item>
                        <a-form-model-item :label="i18n('rowNumPc','每行个数(PC)')">
                            <a-input type="number" v-model="config.rowNum_pc" style="width: 50%"/>
                        </a-form-model-item>
                        <a-form-model-item :label="i18n('rowNumMobile','每行个数(手机)')">
                            <a-input type="number" v-model="config.rowNum_mobile" style="width: 50%"/>
                        </a-form-model-item>
                        <a-form-model-item :label="i18n('isBorder','显示边框')">
                            <a-switch size="small" v-model="config.isBorder" />
                        </a-form-model-item>
                        <a-form-model-item :label="i18n('borderSize','边框大小')">
                            <a-input type="number" v-model="config.borderSize" style="width: 50%"/>
                        </a-form-model-item>
                        <a-form-model-item :label="i18n('borderColor','边框颜色')">
                            <a-input class="labeinput_list" style="width: 20%"
                                     v-model="config.borderColor" type="color"/>
                        </a-form-model-item>
                        <a-form-model-item :label="i18n('indicatorName','指标名称')">
                            <a-switch size="small" v-model="config.indicatorName" />
                        </a-form-model-item>
                    </a-form>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" v-if="config.reportType!='customChart'">
                <span slot="tab">{{i18n('basicSet','基础设置')}}</span>
                <div class="senior">
                    <!--拖拉左边 start-->
                    <div>
                        <div style="line-height: 40px">{{i18n('dataBind','数据绑定')}}</div>
                        <a-radio-group v-model="bindingList" @change="binding">
                            <a-radio value="model">
                                {{i18n('dataModel','数据模型')}}
                            </a-radio>
                            <!--                              <a-radio value="pull">-->
                            <!--                                  API拉取-->
                            <!--                              </a-radio>-->
                        </a-radio-group>
                        <!--数据模型  start-->
                        <div v-if="bindingList=='model'">
                            <BasicsConfig :config="config"></BasicsConfig>
                        </div>
                        <!--数据模型  end-->
                    </div>
                    <!--拖拉左边 end-->

                    <!-- 拖拉右边 start-->
                    <div>
                        <div style="line-height: 40px">{{i18n('dataModel','数据模型')}}</div>
                        <rx-input-button :showClose="false" :placeholder="i18n('dataModel','数据模型','select')" style="width:100%"
                                         v-model="dataModelObj" @click="openDataModelDialog"></rx-input-button>
                        <div class="dimension">{{i18n('dimension','维度')}}</div>
                        <div class="hinder">
                            <a-collapse :bordered="false" default-active-key="1"
                                        v-for="(dimensionobj,index) in modelConfig.dimensions" :key="dimensionobj.tableName">
                                <template #expandIcon="props">
                                    <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0"/>
                                </template>
                                <a-collapse-panel key="1" :header="dimensionobj.tableName">
                                    <vuedraggable class="hinder_come" v-model="dimensionobj.fields" animation="300"
                                                  dragClass="dragClass" ghostClass="ghostClass"
                                                  chosenClass="chosenClass"
                                                  :group="{name: 'site',pull:'clone',put:'false'}"
                                                  @start="dimensiononStart2(index)" @end="dimensionend2">
                                        <transition-group>
                                            <div v-if="!item.hide" class="hinder_tuo" v-for="item in dimensionobj.fields"
                                                 :key="item.fieldName"><i :class="['iconfont '+item.icon]"
                                                                          style="color:#02c5b7"></i>{{ item.fieldLabel }}
                                            </div>
                                        </transition-group>
                                    </vuedraggable>
                                </a-collapse-panel>
                            </a-collapse>
                        </div>
                        <div class="dimension">{{i18n('measure','度量')}}</div>
                        <div class="hinder">
                            <a-collapse :bordered="false" default-active-key="1"
                                        v-for="(dimensionobj,index) in modelConfig.measures">
                                <template #expandIcon="props">
                                    <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0"/>
                                </template>
                                <a-collapse-panel key="1" :header="dimensionobj.tableName">
                                    <vuedraggable class="hinder_come" v-model="dimensionobj.fields" animation="300"
                                                  dragClass="dragClass_du" ghostClass="ghostClass"
                                                  chosenClass="chosenClass"
                                                  :group="{name: 'measure',pull:'clone',put:'false'}"
                                                  @start="measuresStart2(index)" @end="measuresend2">
                                        <transition-group>
                                            <div v-if="!item.hide" class="hinder_tuo" v-for="item in dimensionobj.fields"
                                                 :key="item.fieldName"><i
                                                :class="['iconfont '+item.icon]"></i>{{ item.fieldLabel }}
                                            </div>
                                        </transition-group>
                                    </vuedraggable>
                                </a-collapse-panel>
                            </a-collapse>
                        </div>
                    </div>
                    <!-- 拖拉右边 end-->
                </div>
            </a-tab-pane>
            <a-tab-pane key="3" v-if="config.reportType!='customChart'">
                <span slot="tab">{{i18n('advancedSet','高级设置')}}</span>
                <ChartAdvConfig v-on:subtablecent="subtablecent" :config="config" :selectPublish="selectPublish"
                                :compomentParamsDef="compomentParamsDef"
                                :publishComponent="publishComponent" :listParamsDef="listParamsDef"
                                @setConfig="setConfig"
                                :changeComponent="changeComponent"
                                :constantField="constantField"
                                :genCode="genCode"
                                :params="params"></ChartAdvConfig>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>
import {RxInputButton, Util} from "@lowcode/jpaas-common-lib"
import ChartAdvConfig from '../chartDef/ChartAdvConfig'
import BasicsConfig from '../chartDef/BasicsConfig'
import ComponentDef from './ComponentDef'
import ChartDef from './ChartDef'
import ChartDataModelApi from '@/api/form/core/chartDataModel'
import ChartDataModelDialog from "@/views/modules/form/core/ChartDataModelDialog";
import MapTypes from "@/views/modules/form/core/chartComponent/json/MapTypes"

/**
 * 图表
 *
 */
export default {
    name: "chart-def",
    mixins: [ComponentDef, ChartDef,MapTypes],
    components: {
        RxInputButton,
        ChartAdvConfig,
        BasicsConfig
    },
    data() {
        return {
            config: {},
            defConfig: {
                alias: "chart_" + Util.randomId(),
                name:this.i18n('chart','图表')+Util.randomId(),
                showName: true,
                fullBtn: false,
                //数据模型
                dataModel: "",
                dataModelName: "",
                //类型
                reportType: "bar",
                //维度
                dimensions: [],
                // 度量
                measures: [],
                //度量（多Y轴情况)
                measureList: [],
                //颜色图例
                colorLegends: [],
                //过滤条件
                filterParams: [],
                //自定义颜色
                colour: {
                    value: 1,
                    content: ['#3fb1e3', '#6ae6c2', '#9fa7e6', '#c4eaad', '#94dee7', '#626c90']
                },
                //仪表盘颜色配置
                gaugeColours: [],
                //高级配置
                advConfig: {
                    saveAsImage: false,
                    legendShow: false,
                    legendTop: "top",
                    legendLeft: "left",
                    formatter: '',
                    linkage: false,
                    smooth: false,
                    min: 0,
                    max: 100,
                    fontSize: 20,
                    magicType: false,
                    restore: false,
                    xAxisColor: '#333',
                    joinMeasure: true,
                    titleLeft: "left",
                    sort: 'descending',//descending(降序) ascending(升序)
                },
                receive: {
                    publishComponent: "",
                    mapping: []
                },
                publish: {
                    publishType:"event",
                    paramMapping: []
                }
            },
            modelConfig: {},
            reportTypes: [
                {name: this.i18n('reportType.bar','柱状图'), key: "bar", img: require('@/../static/img/bar.png')},
                {name: this.i18n('reportType.line','折线图'), key: "line", img: require('@/../static/img/line.png')},
                {name: this.i18n('reportType.pie','饼图'), key: "pie", img: require('@/../static/img/pie.png')},
                {name: this.i18n('reportType.gauge','仪表盘'), key: "gauge", img: require('@/../static/img/gauge.png')},
                {name: this.i18n('reportType.lineBar','线柱混搭'), key: "lineBar", img: require('@/../static/img/lineBar.png')},
                {name: this.i18n('reportType.funnel','漏斗图'), key: "funnel", img: require('@/../static/img/funnel.png')},
                {name: this.i18n('reportType.map','地图'), key: "map", img: require('@/../static/img/map.png')},
                {name: this.i18n('reportType.radar','雷达图'), key: "radar", img: require('@/../static/img/radar.png')},
                {name: this.i18n('reportType.numerical','指标卡'), key: "numerical", img: require('@/../static/img/radar.png')},
                {name: this.i18n('reportType.customChart','自定义'), key: "customChart", img: require('@/../static/img/module-chart.png')}
            ],
            //配好颜色
            colour: ['#3fb1e3', '#6ae6c2', '#9fa7e6', '#c4eaad', '#94dee7', '#626c90'],
            colour_obj: ['#2dc7c9', '#b6a2df', '#59b1f0', '#ffb880', '#d97a80', '#8d99b3'],
            //自定义颜色
            definition: [],
            //鼠标移上去删除
            display: null,
            //数据绑定
            bindingList: 'model',//默认
            //数据模型列表
            dataModels: [],
            drag: false,
            tables: [],
            dataModelObj: "",
            customImg:[
                {
                    img:require('../../../../../../src/image/custom1.png')
                }, {
                    img:require('../../../../../../src/image/custom2.png')
                }
            ],
        }
    },
    created() {
        this.init();
        this.selectDataModelParams();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"ChartDef",key);
        },
        subtablecent(value) {
            this.selectPublish = value;
        },
        init() {
            if (this.conf) {
                this.config = this.conf;
                //初始化选中自定义颜色
                if (this.config.colour && this.config.colour.value == 3) {
                    this.definition = this.config.colour.content;
                }
                this.selectPublish = [];
                if (this.config.publish) {
                    for (var i = 0; i < this.config.publish.paramMapping.length; i++) {
                        this.selectPublish.push(this.config.publish.paramMapping[i].key);
                    }
                }
                if (this.conf.dataModel) {
                    ChartDataModelApi.get(this.conf.dataModel).then(res => {
                        if (res.success && res.data && res.data.modelConfig) {
                            this.modelConfig = JSON.parse(res.data.modelConfig);
                            this.getTableName();
                            //获取表配置
                            this.tables = JSON.parse(res.data.tables);
                        }
                        if (res.data.dataSource) {
                            this.dataSource = JSON.parse(res.data.dataSource).value;
                        }
                        this.dataModelObj = JSON.stringify({
                            text: this.conf.dataModelName || res.data.name,
                            value: this.conf.dataModel
                        });
                    });
                }
                this.getListParamsDef();
            } else {
                this.config = this.defConfig;
            }
            this.publishComponent = this.getPublishOptions();
            if (this.config.receive.publishComponent) {
                this.changeComponent(this.config.receive.publishComponent);
            }
            else if(this.config.reportType=='map' && this.config.mapTypeConf && this.config.mapTypeConf.component){
                this.changeComponent(this.config.mapTypeConf.component);
            }
        },
        //维度右边拖动触发事件
        dimensionend2(e) {
            this.childrenId = e.oldIndex;
            //拖入维度配置
            var index = 0;
            for (var obj of this.config.dimensions) {
                if (this.modelConfig.dimensions[this.parentId].fields[this.childrenId].fieldName == obj.fieldName &&
                    this.modelConfig.dimensions[this.parentId].fields[this.childrenId].tableName == obj.tableName) {
                    index++;
                }
            }
            if(index>=2){
                this.config.dimensions.splice(e.newIndex,1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('msa.againTips','已经拖入了该字段，不能重复拖入'),
                    onClick: () => {

                    },
                });
            } else if ((this.config.reportType == 'funnel' || this.config.reportType == 'map'
                || this.config.reportType == 'radar'|| this.config.reportType == 'numerical') && this.config.dimensions.length >= 2) {
                //漏斗图、地图、雷达图、指数卡只能拖入一个
                this.config.dimensions.splice(e.newIndex, 1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('msa.exceed1','不能超过1个'),
                    onClick: () => {

                    },
                });
            } else if (this.config.dimensions.length > 3) {
                this.config.dimensions.splice(e.newIndex, 1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('msa.exceed3','不能超过3个'),
                    onClick: () => {

                    },
                });
            }

            //拖入颜色图例
            var colorIndex = 0;
            for (var obj of this.config.colorLegends) {
                if (this.modelConfig.dimensions[this.parentId].fields[this.childrenId].fieldName == obj.fieldName &&
                    this.modelConfig.dimensions[this.parentId].fields[this.childrenId].tableName == obj.tableName) {
                    colorIndex++;
                }
            }
            if (colorIndex >= 2) {
                this.config.colorLegends.splice(e.newIndex, 1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('msa.againTips','已经拖入了该字段，不能重复拖入'),
                    onClick: () => {

                    },
                });
            } else if ((this.config.reportType == 'map' || this.config.reportType == 'radar') && this.config.colorLegends.length >= 2) {
                //地图、雷达只能拖入一个
                this.config.colorLegends.splice(e.newIndex, 1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('msa.exceed1','不能超过1个'),
                    onClick: () => {

                    },
                });
            } else if (this.config.colorLegends.length > 3) {
                this.config.colorLegends.splice(e.newIndex, 1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('msa.exceed3','不能超过3个'),
                    onClick: () => {

                    },
                });
            }
            //拖入过滤条件配置
            var filterIndex = 0;
            for (var obj of this.config.filterParams) {
                if (this.modelConfig.dimensions[this.parentId].fields[this.childrenId].fieldName == obj.fieldName &&
                    this.modelConfig.dimensions[this.parentId].fields[this.childrenId].tableName == obj.tableName) {
                    filterIndex++;
                }
                //设置默认的条件配置
                if (!obj.condition) {
                    this.$set(obj, "condition", {controlType: "textbox", opType: "EQ"});
                }
            }
            if (filterIndex >= 2) {
                this.config.filterParams.splice(e.newIndex, 1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('msa.againTips','已经拖入了该字段，不能重复拖入'),
                    onClick: () => {
                    },
                });
            }

        },
        //度量右边拖动触发事件
        measuresend2(e) {
            this.MrChildrenId = e.oldIndex;
            var index = 0;
            for (var obj of this.config.measures) {
                if (this.modelConfig.measures[this.MRParentId].fields[this.MrChildrenId].fieldName == obj.fieldName && this.modelConfig.measures[this.MRParentId].fields[this.MrChildrenId].tableName == obj.tableName) {
                    index++;
                }
            }
            if (index >= 2) {
                this.config.measures.splice(e.newIndex, 1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('msa.repeatDrag','不可重复拖拉'),
                    onClick: () => {

                    },
                });
            } else if (this.config.reportType == 'funnel' && this.config.measures.length >= 2) {
                //漏斗图只能拖入一个
                this.config.measures.splice(e.newIndex, 1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('msa.exceed1','不能超过1个'),
                    onClick: () => {

                    },
                });
            }
        },
        dimensiononStart2(index) {
            this.parentId = index;
        },
        measuresStart2(index) {
            this.MRParentId = index;
        },
        //颜色只定义移上去显示那个
        mouseenter(index) {
            this.display = index;
        },
        mouseleave(name) {
            this.display = name
        },
        //选则数据绑定方式
        binding(e) {
            if (e.target.value == 'model') {
                this.bindingList = 'model'
            } else {
                this.bindingList = 'pull'
            }
        },
        //删除自定义颜色
        Remove(index) {
            this.config.colour.content.splice(index, 1)
        },
        //添加自定义颜色
        addto() {
            this.definition.push('#3fb1e3')
        },
        //维度删除
        deleteobj(index) {
            this.config.dimensions.splice(index, 1)
        },
        //度量删除
        measure(index) {
            this.config.measures.splice(index, 1)
        },
        dataType(name) {
            if (name == 'string') {
                return 'iconField-String';
            } else if (name == 'date') {
                return 'iconriqi';
            } else if (name == 'number') {
                return 'iconshuzi';
            }
        },
        //选中颜色
        onChange(e) {
            if (e.target.value == 1) {
                this.config.colour.value = 1;
                this.config.colour.content = this.colour;
            } else if (e.target.value == 2) {
                this.config.colour.value = 2;
                this.config.colour.content = this.colour_obj;
            } else if (e.target.value == 3) {
                this.config.colour.value = 3;
                this.config.colour.content = this.definition;
            }
        },
        //获取数据模型
        selectDataModelParams() {
            ChartDataModelApi.getAll().then(res => {
                if (res && res.success) {
                    this.dataModels = res.data;
                }
            })
        },
        //选择数据模型
        openDataModelDialog(vm) {
            var self = this;
            Util.open({
                component: ChartDataModelDialog,
                curVm: this,
                widthHeight: ['1024px', '550px'],
                title: this.i18n('dataModel','数据模型'),
                zIndex: 10000
            }, function (action, data) {
                if (action != 'ok') return;
                vm.setVal(data.id, data.name);
                self.config.dataModel = data.id;
                self.config.dataModelName = data.name;
                self.getDataModel(data.id);
            });
        },
        getDataModel(value) {
            if (value) {
                ChartDataModelApi.get(value).then(res => {
                    if (res.data.tables || res.data.sqlMode) {
                        if (res.data.modelConfig) {
                            this.modelConfig = JSON.parse(res.data.modelConfig);
                            this.getTableName();
                        }
                        this.tables = JSON.parse(res.data.tables);
                        this.$emit('dragclick', this.config, this.index, this.type);
                        //拖拽里面清空
                        this.config.dimensions = [];
                        this.config.measures = [];
                        this.config.colorLegends = [];
                        this.init();
                    }
                })
            }
        },
        //设置图表类型
        setReportType(type) {
            this.config.reportType = type;
            //饼图需清空颜色图例
            if (type == 'pie') {
                this.config.colorLegends = [];
            }
            //折柱混搭 需要将度量存到measureList
            if (type == 'lineBar') {
                if (!this.config.measureList) {
                    this.config.measureList = [];
                }
                this.config.measureList.push(this.config.measures);
                this.config.measures = [];
            } else {
                this.config.measureList = [];
            }
            //地图
            if(type == 'map'){
                //默认全国地图
                this.$set(this.config,"mapType","china");
                //颜色图例
                this.$set(this.config,"isLegend",false);
                //可视化
                this.$set(this.config,"visualMap",true);
                //地图类型配置
                this.$set(this.config,"mapTypeConf",{});
            }
            else {
                delete this.config.mapType;
                delete this.config.isLegend;
                delete this.config.visualMap;
                delete this.config.mapTypeConf;
            }
            //自定义图表
            if(type == 'customChart'){
                this.$set(this.config,"jsScript","");
            }else {
                delete this.config.jsScript;
            }
            //指标卡
            if(type == 'numerical'){
                this.$set(this.config,"align","center");
                this.$set(this.config,"rowNum_pc",4);
                this.$set(this.config,"rowNum_mobile",1);
                this.$set(this.config,"isBorder",true);
                this.$set(this.config,"borderSize",1);
                this.$set(this.config,"borderColor","#808080");
            }else {
                delete this.config.align;
                delete this.config.rowNum_pc;
                delete this.config.rowNum_mobile;
                delete this.config.isBorder;
                delete this.config.borderSize;
                delete this.config.borderColor;
            }
            this.$emit('dragclick', this.config, this.index, this.type);
        },
        getTableName() {
            //添加表判断
            for (var obj of this.modelConfig.dimensions) {
                if (obj.fields) {
                    for (var obj_children of obj.fields) {
                        this.$set(obj_children, 'tableName', obj.tableName)
                    }
                }
            }
            //添加度量判断
            for (var obj of this.modelConfig.measures) {
                if (obj.fields) {
                    for (var obj_children of obj.fields) {
                        this.$set(obj_children, 'tableName', obj.tableName)
                    }
                }
            }
        },
        //获取参数名称options
        getListParamsDef() {
            var self = this;
            this.listParamsDef = [];
            if (this.config.dataModel) {
                ChartDataModelApi.get(this.config.dataModel).then(res => {
                    var data = res.data;
                    if (data.modelConfig) {
                        var modelConfig = JSON.parse(data.modelConfig);
                        var params = modelConfig.params;
                        for (var i = 0; i < params.length; i++) {
                            var param = params[i];
                            for (var j = 0; j < param.fields.length; j++) {
                                self.listParamsDef.push({
                                    label: param.fields[j].fieldLabel,
                                    value: param.tableName + "." + param.fields[j].fieldName,
                                    comparison: param.fields[j].comparison
                                });
                            }
                        }
                    }
                })
            }
        },
        setConfig(val){
            this.$set(this,"config",val);
            this.$emit('dragclick', this.config, this.index, this.type);
        },
        callback(key){
            if(key =='3'){
                this.getListParamsDef()
            }
        }
    },
    watch: {
        conf: function (val, oldval) {
            this.init();
        },
        definition(val, oldval) {
            if (this.config.colour && this.config.colour.value == 3) {
                this.config.colour.content = val;
            }
        }
    }
}
</script>

<style scoped lang="less">
.preview-img{
    display: flex;
}
.preview-img li{
    width: 100px;
    height: 100px;
    border-radius: 5px;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
}
.preview-img-iconfont{
    position: absolute;
    top: 0px;
    right: 0px;
    height: 15px;
    line-height: 15px;
    width: 15px;
    border: 15px solid;
    border-color: #4285f4 #4285f4 transparent transparent;
    text-align: center;
    color: white;
}
.preview-img-iconfont i{
    margin-top: -11px;
    display: block;
}
.preview-img li img{
    width: 100%;
    height: 100%;
}
.adropdown {
    float: right;
    cursor: pointer;
    margin-right: 10px;
    margin-top: 9px;
    font-size: 15px;
}

.inpurlist {
    width: 110px;
    float: left;
    border: none;
    background: none;
    color: white;
    margin: 0px;
    margin-left: 10px;
    font-size: 14px;
    line-height: 30px;
}

.inpurlistinput {
    width: 110px;
    float: left;
    border: none;
    background: none;
    color: white;
    margin: 0px;
    font-size: 14px;
    line-height: 30px;
}

.ant-input:focus {
    border-color: none !important;
    box-shadow: none !important;
}

.setup {
    margin-top: -14px;
    padding: 7px;
}

.setup > span {
    display: block;
    min-height: 90px;
}

.setup_tuo {
    background-color: #02c5b7;
    border-radius: 2px;
    line-height: 26px;
    padding: 0 7px;
    color: white;
    margin-bottom: 5px;
    height: 30px;
}

.dimension_button {
    line-height: 30px;
    text-align: center;
    color: #c0c5cc;
}

.dimension_come {
    margin-top: 13px;
    min-height: 90px;
    background-color: #ffffff;
    border-radius: 4px;
    border: dashed 1px #dadde0;
    padding-top: 15px;
}

.hinder_tuo {
    line-height: 30px;
}

.hinder_tuo i {
    color: #9babed;
    margin-right: 8px;
}

.senior {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.senior > div:nth-child(1) {
    border-right: 1px solid #dadde0;
    padding-right: 10px;
    padding-left: 10px;
}

.senior > div:nth-child(2) {
    padding-left: 10px;
    padding-right: 8px;
}

.senior > div {
    flex: 1;
    height:100%;
    overflow: auto;
}
.hinder .ant-collapse-header {
    padding: 0px !important;
    margin-top: 10px;
}

.hinder_come {
    margin-left: 20px;
    margin-top: -14px;
}

.hinder_come > span {
    display: block;
    min-height: 60px;
}

.dragClass {
    background-color: #dafaf8 !important;
}

.dragClass_du {
    background-color: #e5eaff !important;
}

.delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    background: #ff5b5b;
    z-index: 999;
    position: absolute;
    top: -10px;
    right: -10px;

}

.delete i {
    font-size: 12px;
}

.colcjia {
    width: 28px;
    height: 28px;
    background-color: #f5f7fa;
    border-radius: 4px;
    border: solid 1px #dadde0;
    text-align: center;
    line-height: 28px;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
}

.ainput {
    margin-left: 25px;
    margin-top: 10px;
}

.ainput > span {
    position: relative;
    display: inline-block;
}

.dimension_list {
    overflow: hidden;
    width: 100%;
}

.dimension_list span {
    color: #46494d;
    font-size: 12px;
    margin-left: 5px;
}

.dimension_list li {
    line-height: 30px;
    width: 100%;

}

.dimension_list li i:nth-child(1) {
    color: #a0b3ff;
}

.dimension_list li i:nth-child(3) {
    color: #c0c5cc;
    float: right;
    cursor: pointer;
}

.dimension {
    margin-top: 10px;
    height: 30px;
    line-height: 30px;
    background-color: #f5f7fa;
    border-radius: 4px;
    border: solid 1px #dadde0;
    padding: 0px 5px;
}

.labeinput_list {
    width: 28px;
    padding: 0px;
    height: 28px;
    border-radius: 4px;
    border: solid 1px #dadde0;
    margin-left: 5px;
}

.colourback_obj {
    display: flex;
    margin-top: 10px;
}

.colourback_obj > div {
    flex: 1;
}

.colourback {
    float: right;
    border-radius: 4px;
    border: solid 1px #dadde0;
    padding: 5px 0px 5px 5px;
    margin-left: -10px;
    margin-top: -5px;
}

.colourback li {
    width: 20px;
    height: 20px;
    float: left;
    border-radius: 3px;
    margin-right: 5px;
}

.chart-middle-chart {
    width: 70px;
    height: 70px;
    margin: auto;
    position: relative;
}

.select {
    border: 1px solid #5b8fff;
}

.repordef.ant-collapse-content {
    border-top: none;
}

.dragiconfont {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 17px;
    width: 17px;
    border: 10px solid;
    border-color: #5b8fff #5b8fff transparent transparent;
}

.dragiconfont i {
    float: left;
    margin-top: -12px;
    margin-left: -1px;
    font-size: 12px;
    color: white;
}

.chart-type {
    width: 100%;
}

.chart-type li span {
    display: block;
    text-align: center;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #808080;
    margin-top: 5px;
}

.chart-type li img {
    width: 30px;
    height: 30px;
    margin-left: calc(50% - 15px);
    margin-top: calc(50% - 30px);
}

.chart-type li {
    width: 20%;
    height: 75px;
    float: left;
    margin-bottom: 10px;
}

.repordef .ant-form-item {
    margin-bottom: 0px !important;
}

.alist {
    margin: 10px;
    border: 1px solid #dadde0;
}

.repordef .ant-collapse-item {
    border-bottom: none !important;
}

.formInput {
    width: calc(100% - 100px) !important;
    float: left;
    margin-top: 4px;
    margin-right: 20px;
}

.ant-collapse-content {
    border-top: 1px solid #dadde0;
}

.color-box {
    display: flex;
}

.chart-tit {
    margin-top: 10px;
}
.chart-span{
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 0px 10px;
}
.rx-cardConfig{
    margin-left: 39px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
}
</style>